<style>
.profile-container {
    padding: 0 50px;
    background: white;
    min-height: calc(100vh - 200px);

    .title {
        padding: 10px 0;
        border-bottom: #dddddd solid 1px;
        color: #bfda7e;
    }

    .row {
        display: flex;
        align-items: center;
        padding: 5px 0;

        .row-left {
            color: #606266;
            min-width: 100px;
            text-align: end;
        }

        .row-right {
            color: #898989;

            .myInput[type="text"] {
                padding: 5px 10px !important;
                border: 1px solid #ccc;

                border-radius: 5px;
            }

            .myInput[type="text"]:focus {
                border-color: #b8db70;
                outline: none;

            }

            textarea {
                border: 2px solid #ccc;

                padding: 5px;
            }

            textarea:focus {
                border-color: #b8db70;

                outline: none;

            }

        }

        .row-center {
            width: 100%;
            display: flex;
            justify-content: center;
        }
    }
}
</style>
<template>
    <div>
        <div class="profile-container">
            <div class="title">基本资料</div>
            <div class="row">
                <div class="row-left">
                    用户昵称：
                </div>
                <div class="row-right">
                    <input class="myInput" type="text" v-model="form.nickname">
                </div>
            </div>

            <div class="row">
                <div class="row-left">
                    用户id：
                </div>
                <div class="row-right">
                    {{ form.id }}
                </div>
            </div>
            <div class="row">
                <div class="row-left">
                    个性签名：
                </div>
                <div class="row-right">
                    <textarea placeholder="占位" rows="4" cols="50" v-model="form.signature"></textarea>
                </div>
            </div>
            <div class="row">
                <div class="row-left">
                    出生日期：
                </div>
                <div class="row-right">
                    <el-date-picker v-model="form.birthday" type="date" placeholder="选择日期">
                    </el-date-picker>
                </div>
            </div>
            <div style="border-bottom: #e6e9ee solid 1px; margin: 20px 0;">

            </div>
            <div class="row">
                <div class="row-center">
                    <el-button type="success" plain @click="save">保存</el-button>
                </div>
            </div>
        </div>

    </div>
</template>
<script>
import request from '@/utils/request';
import { jump } from '@/utils/commonFunction';
export default {
    data() {
        return {
            form: {
                nickname: '',
                id: '123456',
                signature: '',
                birthday: ''
            }
        }
    },
    mounted() {
        this.getUserInfo();
    },
    methods: {
        getUserInfo() {
            let userId = this.$route.params.userId;
            request.get(`/sys_users/${userId}`)
                .then(res => {
                    this.form = res.data;
                })
        },
        save() {
            request.post("/sys_users", this.form).then(res => {
                if (res.code == 200) {
                    this.$message({
                        message: '保存成功',
                        type: 'success'
                    });
                    const userInfo = JSON.parse(localStorage.getItem('userInfo'));
                    userInfo.nickname = this.form.nickname;
                    userInfo.signature = this.form.signature;
                    userInfo.birthday = this.form.birthday;
                    localStorage.setItem('userInfo', JSON.stringify(userInfo));
                    let self = this;
                    setTimeout(function () {
                        let userId = self.$route.params.userId;
                        jump(`/personCenter/${userId}`)
                    }, 1000);
                }else{
                    this.$message({
                        message: '保存失败',
                        type: 'warning'
                    });
                }
            })
        }
    }
}
</script>